.page-index {
  .header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background-color: $themeFfTo1a;

    .time {
      padding-right: 15px;
      border-right: 1px solid #dddddd;
      text-align: center;
      font-weight: bold;
    }

    .title {
      padding: 0 15px;
      font-size: 22px;
      font-weight: bold;
    }

    .header-img {
      width: 35px;
      height: 35px;
      border-radius: 100%;
      background: no-repeat center;
      background-size: cover;
    }
  }

  .main {
    .swiper-wrap {
      position: relative;
      .swiper-item {
        background: no-repeat center;
        background-size: cover;
        .info {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          padding: 25px 20px;
          height: 50%;
          box-sizing: border-box;
          background: linear-gradient(0,rgba(33,23,19,1),rgba(33,23,19,0.9),rgba(33,23,19,0));
          .title {
            margin-bottom: 10px;
            font-size: 20px;
            color: #ffffff;
            font-weight: bold;
          }
          .author {
            font-size: 13px;
            color: #cccccc;
          }
        }
      }
      .swiper-page {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 10px 20px;
        color: #ffffff;
        .swiper-page-item {
          display: inline-block;
          width: 5px;
          height: 5px;
          background-color: rgba(255, 255, 255, 0.7);
          border-radius: 5px;
          margin-left: 5px;
          &.active {
            width: 15px;
            background-color: #ffffff;
          }
        }
      }
    }


    .list-wrap {
      padding: 10px 0;

      .timeline {
        position: relative;
        padding: 10px 15px;
        color: $theme99To66;
        font-weight: bold;
        .title {
          color: red;
        }
        span {
          background-color: $themeFfTo1a;
          padding-right: 15px;
        }
        &::after {
          content: ' ';
          position: absolute;
          top: 50%;
          width: 100%;
          height: 1px;
          background-color: #dddddd;
        }
      }
    }
  }
}

